<template>
  <view class="page pb-20 h-screen" @click.stop="pageClick">
    <view class="top1 pt-100 pb-30 px-30">
      <view class="text-center pb-20">
        <view class="text-50 text-white"> 湖南统招专升本</view>
        <view class="text-70 pt-10 text-white">院校专业查询</view>
      </view>
      <view class="search-item" @click.stop="">
        <u-search
          placeholder="请输入就读专科专业名称"
          :show-action="true"
          v-model="name"
          @search="customSearch"
          @custom="customSearch"
          @change="customChange"
          @blur="custoBlur"
          @focus="custoFocus"
        ></u-search>
        <view class="search-list" v-if="navListShow">
          <scroll-view
            class="search-scroll"
            scroll-y
            show-scrollbar="true"
            scroll-with-animation
            scroll-top="10"
          >
            <template v-for="(item, index) in 0 || navList" :key="index">
              <view
                class="item text-26"
                @click.stop="toselectSpecialDetail(index, true)"
              >
                {{ item.name || "暂无数据" }}
              </view>
            </template>
          </scroll-view>
        </view>
      </view>
    </view>

    <view
      class="grid grid-cols-3 gap-x-20 w-full px-30 py-20 my-20 bg-white text-center rounded-10 border"
    >
      <view class="mt-20 py-30 rounded-20 border back-1" @click="toStart()">
        <view class="color-1 text-36 text-bold">院校库</view>
        <view class="color-1">招生院校</view>
      </view>
      <view class="mt-20 py-30 rounded-20 border back-2" @click="toSpecial">
        <view class="color-2 text-36 text-bold">专业库</view>
        <view class="color-2">招生专业</view>
      </view>
      <view class="mt-20 py-30 rounded-20 border back-3" @click="toscoreList">
        <view class="color-3 text-36 text-bold">录取分数</view>
        <view class="color-3">最低分数</view>
      </view>
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <image
      v-if="listBanner?.length"
      class="image-banner"
      :src="listBanner[0]?.imgUrl || bannerUrl"
      mode="widthFix"
      show-menu-by-longpress
    ></image>
    <!-- #endif -->

    <view class="tip-main">
      <!-- <view @click="showModel">温馨提示</view> -->
      <view @click="">温馨提示</view>
      <view class="tip-msg"
        >尚启航专升本小程序是由湖南尚启航教育科技有限公司开发，为统招专升本考生提供免费的查询服务。数据来源于各招生院校官网和教育部门官方网站等，数据由人工整理，仅供参考。如数据有问题，请反馈给工作人员进行更新。</view
      >
    </view>
    <view class="bottom-1"></view>

    <!-- <scModel
      :show="false"
      title="提示"
      height="400"
    >
    </scModel> -->

    <userSelectDialog :show="isModel" height="400" @change="changeModel">
    </userSelectDialog>
  </view>
</template>

<script>
import scModel from "@/components/scModel/scModel.vue";
import userSelectDialog from "@/components/userSelectDialog/userSelectDialog.vue";
import qs from "qs";

export default {
  data() {
    return {
      name: "",
      navList: [],
      navListShow: false,
      isItemCheck: false,
      isModel: 0,
      userCode: "",
      selectIndex: -1,
      listBanner: [],
      bannerUrl:
        "https://sqh-1311961031.cos.ap-nanjing.myqcloud.com/IMG_1604_1721208692310.PNG",
    };
  },
  async onLoad() {
    this.autoLogin();
    this.getlistBanner();
  },
  onShow() {
    // this.testqs();
  },
  onHide() {
    setTimeout(() => {
      this.navListShow = false;
    }, 600);
  },
  methods: {
    testqs() {
      // 设置 indices 为 false 不显示索引
      var params = qs.stringify({ list: [1, 2, 3] },{indices:false});
      // list=1&list=2&list=3
      // 当数组被序列化时，默认显示索引，自动编码
      var params = qs.stringify({ list: [1, 2, 3] });
      // list[0]=1&list[1]=2&list[2]=3
      console.log("params=", decodeURIComponent(params));
      // 解析字符串，URI自动解码
      var paramsOriginal = qs.parse(params);
      //  {list:[1,2,3]}
      
      console.log("paramsOriginal=", paramsOriginal);
    },
    autoLogin() {
      uni.login({
        success: async (loginRes) => {
          // console.log('loginRes',loginRes)
          var url = "";
          // #ifdef MP-WEIXIN
          url = "api/user/wechat/applet/login";
          // #endif

          // #ifdef MP-TOUTIAO
          url = "api/user/douyin/applet/login";
          // #endif
          const { code, data } = await this.$http.post(
            url,
            {
              code: loginRes.code,
            },
            1
          );
          if (code === -1) {
            // 新用户清理之前的缓存
            uni.clearStorageSync();
          }
          if (code === 200) {
            uni.setStorageSync("tokenValue", data.tokenValue);
            //临时用户-选择主账号
            if (data.temporary == 1) {
              this.isModel = true;
              // uni.hideTabBar()
            }
            //首页登录完成，进行Websocket连接
            // this.$tool.testWebsocket()
          }
        },
      });
    },
    changeModel() {
      this.isModel = false;
      // this.autoLogin()
      // 刷新页面，更新token
      uni.reLaunch({
        url: "/pages/special/home",
      });
    },
    showModel() {
      this.isModel = true;
    },

    pageClick() {
      // console.log("pageClick");
      this.navListShow = false;
    },
    custoBlur(e) {
      // console.log("custoBlur", e);
      // setTimeout(() => {
      //   this.navListShow = false;
      // }, 300);
    },
    custoFocus(e) {
      // console.log("custoFocus", e);
      if (this.name.length) {
        this.navListShow = true;
      }
    },

    // 定义 change 方法
    customChange(e) {
      // console.log("customChange", e);
      this.$tool.debounce(() => {
        console.log("customChange=", e);

        if (e != "") {
          this.navListShow = true;
          this.getList();
          // 点击列表触发的专业名称更改
          if (this.isItemCheck) {
            this.isItemCheck = false;
          } else {
            this.selectIndex = -1;
          }
        } else {
          // console.log("customChange==", e);
          this.navListShow = false;
          this.navList = [];
          this.selectIndex = -1;
        }
      }, 600)();
    },
    customSearch(e) {
      console.log("customSearch", e);

      if (e == "") {
        uni.showToast({
          icon: "none",
          title: `请输入专业`,
        });
        return;
      }
      if (!this.navList.length) {
        uni.showToast({
          icon: "none",
          title: `专业不存在，请重新输入`,
        });
        return;
      }

      if (this.selectIndex == -1) {
        uni.showToast({
          icon: "none",
          title: `请选择专业`,
        });
        return;
      }
      // 已经选择过专业
      this.selectIndex = 0;
      this.toselectSpecialDetail(this.selectIndex);
    },
    toStart() {
      uni.navigateTo({
        url: "/pages/special/school",
      });
    },
    toselectSpecialDetail(index, isItemCheck = false) {
      console.log("index=", index);
      let item = this.navList[index] || this.navList[0];
      this.name = item.name;
      this.selectIndex = index;
      this.isItemCheck = isItemCheck;
      uni.navigateTo({
        url: "/pages/special/selectSpecialDetail" + "?specialtyId=" + item.id,
      });
    },
    toSpecial() {
      uni.navigateTo({
        url: "/pages/special/special",
      });
    },
    toscoreList() {
      uni.navigateTo({
        url: "/pages/special/scoreList",
      });
    },

    getList(name = "") {
      this.$http
        .get1("/client/undergraduate/searchSpecialtys", {
          name: this.name,
          learnLevel: 1,
          level: 3,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.navList = res.data;
          }
        });
    },
    async getlistBanner() {
      let { data } = await this.$http.get1("/banner/listBanner?channel=5");
      this.listBanner = data;
      // console.log('this.listBanner=',this.listBanner);
    },
    async userUpdate() {
      let param = { temporary: 0 };
      let { data } = await this.$http.post("/api/user/update", param, 1);
      this.isModel = !this.isModel;
      uni.showToast({
        title: "操作成功",
        icon: "none",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
  // padding-bottom: 100rpx;
}

.page {
  // padding: 20rpx;
  // box-sizing: border-box;
  // padding-bottom: 150rpx;
}

.top1 {
  background-color: #5480f8;
}

.back-1 {
  background-color: #e5d3fc;
}

.back-2 {
  background-color: #fedbca;
}

.back-3 {
  background-color: #c4f4ff;
}

.color-1 {
  color: #8d76bd;
}

.color-2 {
  color: #ad7e57;
}

.color-3 {
  color: #6ac0d9;
}

.content {
  width: 690rpx;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 0 30rpx;
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #333;

  .val {
    text-align: right;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
}

.search-item {
  position: relative;

  // border:1rpx solid red;

  ::v-deep .u-search {
    .u-search__action {
      font-size: 28rpx;
      color: #f8f6f6;
    }
  }

  .search-list {
    position: absolute;
    padding: 12rpx 30rpx;
    left: 0rpx;
    top: 70rpx;
    width: 618rpx;
    height: 420rpx;
    background: #fff;
    box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
    border-radius: 20rpx;
    z-index: 11;
    .search-scroll {
      height: 390rpx;
      // border: 1rpx solid #ccc;
    }

    // border:1rpx solid #ccc;
    .item {
      padding: 10rpx 10rpx;
      // border: 1rpx solid #ccc;
    }
  }
}

.image-banner {
  width: 690rpx;
  margin: 12rpx 30rpx;
  border-radius: 10rpx;
  // height: 200rpx;
}

.tip-main {
  // display: flex;
  margin: 12rpx 30rpx;
  padding: 12rpx 30rpx;
  background: #fff;
  box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
  border-radius: 10rpx;
  .tip-msg {
    font-size: 24rpx;
  }
}
.bottom-1 {
  height: 30rpx;
  width: 100%;
}
</style>
